import { Icon } from 'antd';
import _ from 'lodash';
import * as React from 'react';

const Layer = ({ level, onCloseClick, title, children }) => {
  const isUpperLayer = level !== undefined && level > 0;
  const titleDom = isUpperLayer ? (
    <div className='layer-title' style={{ marginLeft: `${100 * level}px` }}>
      <a onClick={onCloseClick}><Icon type='cross-circle-o' /></a>{title}
    </div>
  ) : (
    (<div className='layer-title'>
      {title}
    </div>)
  );

  return (
    <div className={`console-layer ${isUpperLayer ? 'with-mask' : ''}`}>
      {titleDom}
      <div className='layer-content'>
        {children}
      </div>
    </div>
  );
};

const Layers = ({ layers, onCloseClick, title, children }) => {
  const layersDom = _.map(layers, (layer, index) => {
    const LayerComponent = layer.component;
    const layerTitle = _.isFunction(layer.title) ? layer.title(layer.props) : layer.title;

    const layerProps = {
      key: index,
      level: index + 1,
      title: layerTitle,
      onCloseClick
    };
    return <Layer {...layerProps}><LayerComponent {...layer.props}/></Layer>;
  });

  return (
    <div className='console-layers'>
      <Layer title={title}>{children}</Layer>
      {layersDom}
    </div>
  );
};

export default Layers;
